import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    ActionSheet,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import Moment from 'moment';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import MyListView from '../../components/MyListView/MyListView';
import MyListViewLz from '../../components/MyListViewLz/MyListViewLz';
import DistributionCarousel  from './distributionCarousel';
import {routerRedux} from "dva/router";
import {distribution} from './distribution.less';
import DistributionItem from "./distributionItem";
import  caidan from'../../assets/svg/caidan.svg';
import updown1 from '../../assets/svg/updown1.svg';
import updown2 from '../../assets/svg/updown2.svg';
import updown3 from '../../assets/svg/updown3.svg';
import {goto_search_title} from "../search/GotoSearch.less";
import {fenlei, noguanzhu} from "../find/findIndex.less";
import {goods_search_header} from "../search/GoodsSearch.less";

const Item = Popover.Item;




class Distribution extends Component {
    constructor(props){
        super(props);
        this.state={
            modal:false,
            tabs:[],
            value:""
        };

        this.AlloyTouch = null;
        this.typeId = "";
        this.title = "";
        this.page=0;
        this.tabs=[{title:"全部",typeId:"abc"}];
    }

    componentDidMount(){
        this.props.dispatch({ type: 'distribution/distributionIndexEFF',obj:{} }).then(result=>{
            console.log(result)
            if(result.code==200){
                console.log(result)
                result.ret.goodsType.map((item)=>{
                    this.tabs.push({title:item.typeName,typeId:item.typeId,})
                });
                this.setState({
                    tabs:this.tabs
                })
            }
        });
        this.refresh();
    }
    onChange = (e) => {
        this.setState({
            value: e.target.value
        });
    };
    refresh = () => {
        return this.props.dispatch({ type: 'distribution/distributeSearchEFF',obj:{searchType:"typeIdSearch",keyword:this.typeId,pageNo:1 ,sortField:"",
                sortOrder:""} });
    }

    loadMore = () => {
        const {dispatch,distribution} = this.props;
        console.log(distribution.sortField )
        return this.props.dispatch({ type: 'distribution/distributeSearchEFF', obj:{searchType:"typeIdSearch",keyword:this.typeId,pageNo:this.props.distribution.pageNo+1 ,sortField:distribution.sortField ,
                sortOrder:distribution.sortOrder } });
    }

    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };
    showModal = (e) => {
        this.setState({
            modal: true,
        });
    };
    onClose = () => {
        this.setState({
            modal: false,
        });
    };
    changeOrder = ( sortField, sortOrder ) =>{
        this.AlloyTouch.to(0);
        this.props.dispatch({
            type: 'distribution/distributeSearchEFF',
            obj:{
                pageNo:1,
                searchType:"typeIdSearch",
                sortField:sortField,
                sortOrder:sortOrder
            }
        });
    }
    renderContent = tab =>{
        const {dispatch,distribution} = this.props;

        const {carouselList,goodsType,distributorProductVoList} = this.props.distribution;
        console.log(distributorProductVoList)
            return <div style={{height:"100%"}}>
                    <DistributionCarousel data={carouselList}></DistributionCarousel>
                <Flex className={goods_search_header} style={{margin:".1rem 0"}}>
                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('', distribution.sortField =='' ? ( distribution.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={distribution.sortField ==''?{marginRight: '.04rem',color:"#ff0036"}:{marginRight: '.04rem'}}>默认</span>
                        {/*<Icon  type={*/}
                        {/*filter.sortField =='' ? (filter.sortOrder=="asc" ? updown3.id : updown2.id) :  updown1.id*/}
                        {/*}/>*/}
                    </Flex>

                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('salenum', distribution.sortField =='salenum' ? ( distribution.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={{marginRight: '.04rem'}}>销量</span>
                        <Icon  type={
                            distribution.sortField =='salenum' ? (distribution.sortOrder=="asc" ? updown2.id : updown3.id) :  updown1.id
                        }/>
                    </Flex>

                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('goodsStorePrice',distribution.sortField =='goodsStorePrice' ? ( distribution.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={{marginRight: '.04rem'}}>价格</span>
                        <Icon  type={
                            distribution.sortField =='goodsStorePrice' ? (distribution.sortOrder=="asc" ? updown2.id : updown3.id) :  updown1.id
                        }/>
                    </Flex>

                    <Flex
                        justify="center"
                        onClick={() => {
                            this.changeOrder('commission',distribution.sortField =='commission' ? ( distribution.sortOrder=="asc" ? "desc" : "asc" ) : "asc")}
                        }
                    >
                        <span style={{marginRight: '.04rem'}}>提成</span>
                        <Icon  type={
                            distribution.sortField =='commission' ? (distribution.sortOrder=="asc" ? updown2.id : updown3.id) :  updown1.id
                        }/>
                    </Flex>

                </Flex>
                {distributorProductVoList[0]?<MyListViewLz
                    style={{height:"100%"}}
                    kid={tab.typeId}
                    cc={true}
                    getAlloyTouch={ this.getAlloyTouch }
                    refresh={ this.refresh }
                    loadMore={ this.loadMore }
                    hasMore={ this.props.distribution.pageNo * this.props.distribution.pageSize < this.props.distribution.totalRows  }
                    // itemWrapperClass={ goods_list }
                    // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                    renderItem={(v,i,a)=>{
                        return <DistributionItem v={v} refresh={this.refresh} key={i} dispatch={dispatch}></DistributionItem>
                    }}
                    data={ distributorProductVoList }>
                </MyListViewLz>:<div style={{width: "100%", height: "8rem", background: "#f6f6f6"}}>
                <img src={ require('../../assets/img/noGoods.png')} style={{display: "block", margin: "3rem auto 0"}} />
                <p style={{fontSize: ".3rem", padding: ".2rem 0 .3rem", textAlign: "center", color: "#b9b9b9"}}>当前暂无商品...</p>
            </div>}
                </div>


    }

    render() {
        const {dispatch} = this.props;
        const {carouselList,goodsType} = this.props.distribution;
       console.log(this.tabs)
        const {value} = this.state;
        return ( <Flex direction="column" className={distribution} style={{height:"100%"}}>
                <Flex className={ goto_search_title }>
                    <Icon type='left' style={{ paddingLeft:'0.1rem',width:".5rem",height:".5rem" }} onClick={() => {
                        this.props.dispatch(routerRedux.goBack())
                    }}/>
                    <Flex className="search_input" >
                        {value.length>0? <Icon className="search_icon" onClick={()=>{
                            this.props.dispatch(routerRedux.push({
                                pathname:`/distributionSearch/${value}`
                            }));
                        }}  type="search" size="md" />:""}
                        <form action=""
                            onSubmit={ (e)=>{ this.props.dispatch(routerRedux.push({
                                pathname:`distributionSearch/${value}`
                            })); e.preventDefault(); } }
                        >
                            <input placeholder="搜索你想要的商品"  type="search" value={ value } onChange={this.onChange} />
                        </form>
                    </Flex>
                   <Icon type={caidan.id} style={{marginRight:".3rem"}} onClick={()=>this.showModal()}></Icon>
                </Flex>
                {this.tabs.length>1?<Tabs tabs={this.state.tabs} swipeable={false} initialPage={0} page={this.page}  onChange={(tab, index) => {
                    let typeId = tab.typeId;
                    let title = tab.title;
                    this.page=index;
                    if(index==0) {this.typeId="";this.title="";}
                    else  {this.typeId=typeId;this.title=title;}
                    this.refresh();

                }} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}>
                    {this.renderContent}
                </Tabs>:""}


                <Modal
                    popup
                    visible={this.state.modal}
                    onClose={this.onClose}
                    animationType="slide-down"
                    className={fenlei}
                >
                    <WingBlank>
                        <Flex  wrap="wrap" style={{width:"100%",padding:".3rem 0",backgroundColor:"#f3f3f3"}}>
                            {this.tabs.map((item,i)=>{
                                return <div key={i} style={i==this.page?{color:"#ff0036",width:"25%",textAlign:"center"}:{width:"25%",textAlign:"center"}}>
                                    <div style={{display:"inline-block",textAlign:"center",backgroundColor:"#fff",marginBottom:".3rem",padding:".05rem .1rem",width:"80%",borderRadius:".3rem"}}
                                         onClick={(e)=>{
                                             this.page = i;
                                             if(i==0) this.typeId="";
                                             else  this.typeId=item.typeId;
                                             this.refresh();
                                             this.onClose();
                                         }}>{item.title}</div>
                                </div>
                            })}
                        </Flex>
                    </WingBlank>

                </Modal>
            </Flex>

        )


    }
}

export default connect(({ distribution }) => ({ distribution}))(Distribution);
